import React, { createContext, useState, useContext } from 'react'
import customTheme from '../config/theme.json'

const ThemeContext = createContext()

// 主题配置
const themeConfigs = {
    light: {
        algorithm: 'default',
        token: {
            colorPrimary: '#1890ff',
            colorBgContainer: '#ffffff',
            colorText: 'rgba(0, 0, 0, 0.85)',
            colorBgBase: '#ffffff',
            borderRadius: 6,
        },
        components: {
            Button: {
                colorPrimary: '#1890ff',
                borderRadius: 6,
            },
            Card: {
                colorBgContainer: '#ffffff',
                borderRadius: 6,
            },
            Layout: {
                colorBgHeader: '#ffffff',
                colorBgBody: '#f0f2f5',
            }
        }
    },
    dark: {
        algorithm: 'dark',
        token: {
            colorPrimary: '#177ddc',
            colorBgContainer: '#141414',
            colorText: 'rgba(255, 255, 255, 0.85)',
            colorBgBase: '#000000',
            borderRadius: 6,
        },
        components: {
            Button: {
                colorPrimary: '#177ddc',
                borderRadius: 6,
            },
            Card: {
                colorBgContainer: '#141414',
                borderRadius: 6,
            },
            Layout: {
                colorBgHeader: '#141414',
                colorBgBody: '#000000',
            }
        }
    },
    custom: {
        algorithm: 'default',
        token: {
            colorPrimary: '#722ed1',
            colorBgContainer: '#f9f0ff',
            colorText: '#722ed1',
            colorBgBase: '#ffffff',
            borderRadius: 8,
        },
        components: {
            Button: {
                colorPrimary: '#722ed1',
                borderRadius: 8,
            },
            Card: {
                colorBgContainer: '#f9f0ff',
                borderRadius: 8,
            },
            Layout: {
                colorBgHeader: '#f9f0ff',
                colorBgBody: '#ffffff',
            }
        }
    },
    // 粉色主题
    pink: {
        algorithm: 'default',
        token: {
            ...customTheme.pink.token,
            colorBgContainer: '#fff0f6',
            colorText: '#eb2f96',
            colorBgBase: '#ffffff',
            borderRadius: 6,
        },
        components: {
            Button: {
                colorPrimary: customTheme.pink.token.colorPrimary,
                borderRadius: 6,
            },
            Card: {
                colorBgContainer: '#fff0f6',
                borderRadius: 6,
            },
            Layout: {
                colorBgHeader: '#fff0f6',
                colorBgBody: '#ffffff',
            }
        }
    },
    // 绿色主题
    green: {
        algorithm: 'default',
        token: {
            ...customTheme.green.token,
            colorBgContainer: '#f6ffed',
            colorText: '#52c41a',
            colorBgBase: '#ffffff',
            borderRadius: 6,
        },
        components: {
            Button: {
                colorPrimary: customTheme.green.token.colorPrimary,
                borderRadius: 6,
            },
            Card: {
                colorBgContainer: '#f6ffed',
                borderRadius: 6,
            },
            Layout: {
                colorBgHeader: '#f6ffed',
                colorBgBody: '#ffffff',
            }
        }
    }
}

export const ThemeProvider = ({ children }) => {
    const [currentTheme, setCurrentTheme] = useState('light')
    const [themeConfig, setThemeConfig] = useState(themeConfigs.light)

    const changeTheme = (themeName = 'light') => {
        setCurrentTheme(themeName)
        setThemeConfig(themeConfigs[themeName])
    }

    return (
        <ThemeContext.Provider value={{ currentTheme, themeConfig, changeTheme }}>
            {children}
        </ThemeContext.Provider>
    )
}

export const useTheme = () => useContext(ThemeContext) 